<template>
  <div class="div_color">
    <el-button type="primary" style="margin-top: 5px;margin-left: 5px" @click="handleWindowPrint('#box', '费用报销单')">打印单据</el-button>
    <div id="box">
      <div>
        <div class="font_center"><b>费用报销单</b></div>
      </div>
      <el-form :model="expense" label-position="left" label-width="120" style="margin-left: 20px;margin-top: 20px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="金额">
              <b>￥{{expense.expsMoney}}</b>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="票据张数">
              <b>{{expense.expsNote}}</b>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="费用类别">
              <b>{{expense.expsSort}}</b>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="日期">
              <b>{{expense.expsDate | formatDate}}</b>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="用途">
              <b>{{expense.expsPurpose}}</b>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="客户">
              <b>{{expense.customerByCustomId.cusName}}</b>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="备注">
              <b>{{expense.expsRemark}}</b>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="审批人">
              <b>{{empName}}</b>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="经手人">
              <b>{{expense.empByEmployeesId.empName}}</b>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审批状态">
              <b>{{expense.cucheckTypeByCutId.cutName}}</b>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="人数">
              <b>{{expense.expsNumber}}</b>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发票类别">
              <b>{{expense.expsGenre}}</b>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="发票税率">
              <b>{{expense.expsRate}}</b>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报销">
              <b>{{expense.expsRefus | formatState}}</b>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
    export default {
      name: "AsExpensesPrint",
      data: function () {
        return {
          expense: {
            expsId:'',
            expsRefus:'',
            expsDate:'',
            expsMoney:'',
            expsSort:'',
            expsNote:'',
            expsPurpose:'',
            expsRemark:'',
            expsNumber:'',
            expsGenre:'',
            expsRate:'',
            expsRecord:'',
            expsDelete:'',
            customerByCustomId:{
              customId:'',
              cusName:''
            },
            cucheckTypeByCutId:{
              cutId:'',
              cutName:''
            },
            empByEmployeesId:{
              employeesId:'',
              empName:''
            }
          },
          empName:'', //审批人
        }
      },
      created:function() {
        this.init();
      },
      methods:{
        init(){
          var expsId = this.$route.query.expsId;
          if(expsId != undefined && expsId != ''){
            this.$axios.get("http://localhost:8088/exs/update-exps",
              {params:{expsId:expsId}}
            ).then(v=>{
              this.expense = v.data;
            }).catch(v=>{
              alert("访问失败!"+v.data);
            })

            this.$axios.get("http://localhost:8088/exs/check-empId",
              {params:{expsId:expsId}}
            ).then(v=>{
              this.empName = v.data;
            }).catch(v=>{
              alert("访问失败!"+v.data);
            })
          }
        },
        handleWindowPrint (ele, fileName) {//打印
          document.body.innerHTML = document.querySelector(ele).outerHTML;
          // 转异步 等待dom元素渲染（样式）完毕在打印
          setTimeout(() => {
            // 打印
            window.print();
            // 刷新页面
            window.location.reload()
          }, 20)
        },
        clear(){
          this.expense = {
            expsId:'',
            expsRefus:'',
            expsDate:'',
            expsMoney:'',
            expsSort:'',
            expsNote:'',
            expsPurpose:'',
            expsRemark:'',
            expsNumber:'',
            expsGenre:'',
            expsRate:'',
            expsRecord:'',
            expsDelete:'',
            customerByCustomId:{
              customId:'',
              cusName:''
            },
            cucheckTypeByCutId:{
              cutId:'',
              cutName:''
            },
            empByEmployeesId:{
              employeesId:'',
              empName:''
            }
          };
          this.empName = ''; //审批人
        }
      },
      watch:{
        $route(){//跳转到该页面后需要进行的操作
          this.clear();
          this.init();
        }
      },
      filters: {
        formatDate(time){
          let date   = new Date(time)//把定义的时间赋值进来进行下面的转换
          let year   = date.getFullYear();
          let month  = date.getMonth()+1;
          let day    = date.getDate();
          let hour   = date.getHours();
          let minute = date.getMinutes();
          let second = date.getSeconds();
          return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
        },
        formatState(refus){
          if(refus != null && refus != ''){
            if(refus == 1){
              return "未报销"
            }
            if(refus == 2){
              return "已报销"
            }
          }
        }
      }
    }
</script>

<style scoped>
  .div_color{
    width: 100%;
    background-color: white;
  }
  .font_center{
    border: 1px hidden red;
    width: 150px;
    height: 30px;
    font-size: 18px;
    margin: 0 auto;
  }
  b{
    font-weight: 600;
  }
</style>
